<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Accordion</h1>
        <p>Accordion groups a collection of contents in tabs.</p>
    </div>
    <app-demoActions github="accordion" stackblitz="accordion-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <p-toast></p-toast>
    
    <div class="card">
        <h5>Default</h5>
        <p-accordion>
            <p-accordionTab header="Header I" [selected]="true">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-accordionTab>
            <p-accordionTab header="Header II">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
            </p-accordionTab>
            <p-accordionTab header="Header III">
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
            </p-accordionTab>
        </p-accordion>
    
        <h5>Multiple</h5>
        <p-accordion [multiple]="true">
            <p-accordionTab header="Header I">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-accordionTab>
            <p-accordionTab header="Header II">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
           </p-accordionTab>
            <p-accordionTab header="Header III">
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                    cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
            </p-accordionTab>
        </p-accordion>
            
        <h5>Programmatic</h5>
        <div class="py-3">
            <p-button [icon]="activeState[0] ? 'pi pi-minus' : 'pi pi-plus'" (click)="toggle(0)" styleClass="p-button-text" label="Toggle 1st"></p-button>
            <p-button [icon]="activeState[1] ? 'pi pi-minus' : 'pi pi-plus'" (click)="toggle(1)" styleClass="p-button-text ml-2" label="Toggle 2st"></p-button>
            <p-button [icon]="activeState[2] ? 'pi pi-minus' : 'pi pi-plus'" (click)="toggle(2)" styleClass="p-button-text ml-2" label="Toggle 3st"></p-button>
        </div>
            
        <p-accordion>
            <p-accordionTab header="Header I" [(selected)]="activeState[0]">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-accordionTab>
            <p-accordionTab header="Header II" [(selected)]="activeState[1]">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
            </p-accordionTab>
            <p-accordionTab header="Header III" [(selected)]="activeState[2]">
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                    cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
            </p-accordionTab>
        </p-accordion>
    
        <h5>Tab Change Event</h5>
        <p-accordion (onClose)="onTabClose($event)" (onOpen)="onTabOpen($event)">
            <p-accordionTab header="Header I">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-accordionTab>
            <p-accordionTab header="Header II">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
            </p-accordionTab>
            <p-accordionTab header="Header III">
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                    cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
            </p-accordionTab>
            <p-accordionTab header="Header IV" [disabled]="true">
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                    cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
            </p-accordionTab>
        </p-accordion>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header ="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;AccordionModule&#125; from 'primeng/accordion';
</app-code>

            <h5>Getting Started</h5>
            <p>Accordion element consists of one or more p-accordionTab elements. Title of the tab is defined using header attribute.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-accordion&gt;
    &lt;p-accordionTab header="Header 1"&gt;
       Content 1
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header 2"&gt;
        Content 2
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header 3"&gt;
        Content 3    
    &lt;/p-accordionTab&gt;
&lt;/p-accordion&gt;
</app-code>

            <h5>Selected</h5>
            <p>Visibility of the content is specified with the selected property that supports one or two-way binding.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-accordion&gt;
    &lt;p-accordionTab header="Header 1" [selected]="true"&gt;
       Content 1
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header 2"&gt;
        Content 2
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header 3"&gt;
        Content 3    
    &lt;/p-accordionTab&gt;
&lt;/p-accordion&gt;
</app-code>

        <h5>Multiple</h5>
        <p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple
            tabs be active at the same time.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-accordion [multiple]="true"&gt;
    &lt;p-accordionTab header="Header 1"&gt;
        Content 1
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header 2"&gt;
        Content 2
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header 3"&gt;
        Content 3    
    &lt;/p-accordionTab&gt;
&lt;/p-accordion&gt;
</app-code>

        <h5>Disabled</h5>
        <p>A tab can be disabled by setting the disabled property to true.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-accordion&gt;
    &lt;p-accordionTab header="Header 1" [disabled]="true"&gt;
       Content 1
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header 2"&gt;
        Content 2
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header 3"&gt;
        Content 3    
    &lt;/p-accordionTab&gt;
&lt;/p-accordion&gt;
</app-code>

            <h5>Custom Content at Headers</h5>
            <p>Custom content can be placed at an accordion header with header template.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-accordionTab&gt;
    &lt;ng-template pTemplate="header"&gt;Header Content&lt;/ng-template&gt;
    &lt;ng-template pTemplate="content"&gt;Body Content&lt;/ng-template&gt;
&lt;/p-accordionTab&gt;
</app-code>

<h5>Programmatic Control</h5>
<p>Tabs can be controlled programmatically using the <i>activeIndex</i> property of the accordion in general or the <i>selected</i> property of p-accordionTab individually.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Programmatic&lt;/h5&gt;
&lt;div class="py-3"&gt;
    &lt;p-button [icon]="activeState[0] ? 'pi pi-minus' : 'pi pi-plus'" (click)="toggle(0)" styleClass="p-button-text" label="Toggle 1st"&gt;&lt;/p-button&gt;
    &lt;p-button [icon]="activeState[1] ? 'pi pi-minus' : 'pi pi-plus'" (click)="toggle(1)" styleClass="p-button-text ml-2" label="Toggle 2st"&gt;&lt;/p-button&gt;
    &lt;p-button [icon]="activeState[2] ? 'pi pi-minus' : 'pi pi-plus'" (click)="toggle(2)" styleClass="p-button-text ml-2" label="Toggle 3st"&gt;&lt;/p-button&gt;
&lt;/div&gt;
        
&lt;p-accordion&gt;
    &lt;p-accordionTab header="Header I" [(selected)]="activeState[0]"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header II" [(selected)]="activeState[1]"&gt;
        &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header III" [(selected)]="activeState[2]"&gt;
        &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
&lt;/p-accordion&gt;
</app-code>
    
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class AccordionDemo &#123;
    
    activeState: boolean[] = [true, false, false];

    toggle(index: number) &#123;
        this.activeState[index] = !this.activeState[index];
    &#125;
&#125;
</app-code>

            <h5>Lazy Loading</h5>
            <p>Lazy loading helps initial load performance by only initializing the active tab, inactive tabs are not initialized until they get selected. A lazy
            loaded accordionTab contents are cached by default so that upon reselection, they are not created again. You may use cache property on AccordionTab to
            configure this behavior. A AccordionTab is specified as lazy when there is a ngTemplate with pTemplate="content" in it.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-accordion&gt;
    &lt;p-accordionTab header="Header 1"&gt;
        Content 1
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header 2"&gt;
        &lt;ng-template pTemplate="content"&gt;
            Complex Content to Lazy Load
        &lt;/ng-template&gt;
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header 3"&gt;
        &lt;ng-template pTemplate="content"&gt;
            Complex Content to Lazy Load
        &lt;/ng-template&gt;
    &lt;/p-accordionTab&gt;
&lt;/p-accordion&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class AccordionDemo &#123;
    
    index: number = 0;

    openNext() &#123;
        this.index = (this.index === 2) ? 0 : this.index + 1;
    &#125;
    
    openPrev() &#123;
        this.index = (this.index === 0) ? 2 : this.index - 1;
    &#125;
&#125;
</app-code>

            <h5>Animation Configuration</h5>
            <p>Transition of the toggle animation can be customized using the transitionOptions property with a default value as <b>400ms cubic-bezier(0.86, 0, 0.07, 1)</b>, 
                example below disables the animation altogether.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-accordionTab [transitionOptions]="'0ms'" header="Header 1"&gt;
    Content
&lt;/p-accordionTab&gt;
</app-code>
            <h5>Properties for Accordion</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>multiple</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, multiple tabs can be activated at the same time.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>false</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>activeIndex</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Index of the active tab or an array of indexes to change selected tab programmatically.</td>
                        </tr>
                        <tr>
                            <td>expandIcon</td>
                            <td>string</td>
                            <td>pi pi-fw pi-chevron-right</td>
                            <td>Icon of a collapsed tab.</td>
                        </tr>
                        <tr>
                            <td>collapseIcon</td>
                            <td>string</td>
                            <td>pi pi-fw pi-chevron-down</td>
                            <td>Icon of an expanded tab.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h5>Properties for AccordionTab</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>header</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Title of the tab.</td>
                        </tr>
                        <tr>
                            <td>selected</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Defines if the tab is active.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Defines whether the tab can be selected.</td>
                        </tr>
                        <tr>
                            <td>transitionOptions</td>
                            <td>string</td>
                            <td>400ms cubic-bezier(0.86, 0, 0.07, 1)</td>
                            <td>Transition options of the animation.</td>
                        </tr>
                        <tr>
                            <td>cache</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether a lazy loaded panel should avoid getting loaded again on reselection.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onClose</td>
                            <td>
                                event.originalEvent: Click object<br>
                                event.index: Index of the tab
                            </td>
                            <td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
                        </tr>
                        <tr>
                            <td>onOpen</td>
                            <td>
                                event.originalEvent: Click object<br>
                                event.index: Index of the tab
                            </td>
                            <td>Callback to invoke when a tab gets expanded.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-accordion (onOpen)="onTabOpen($event)"&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
onTabOpen(e) &#123;
    var index = e.index;
&#125;
</app-code>

            <h5>Templates</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>header</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>content</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>

            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-accordion</td>
                            <td>Container element</td>
                        </tr>
                        <tr>
                            <td>p-accordion-header</td>
                            <td>Header of a tab.</td>
                        </tr>
                        <tr>
                            <td>p-accordion-content</td>
                            <td>Content of a tab.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>

        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/accordion" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-accordion-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Default&lt;/h5&gt;
&lt;p-accordion&gt;
    &lt;p-accordionTab header="Header I" [selected]="true"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header II"&gt;
        &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header III"&gt;
        &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                    cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
&lt;/p-accordion&gt;

&lt;h5&gt;Multiple&lt;/h5&gt;
&lt;p-accordion [multiple]="true"&gt;
    &lt;p-accordionTab header="Header I"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header II"&gt;
        &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header III"&gt;
        &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
&lt;/p-accordion&gt;
    
&lt;h5&gt;Programmatic&lt;/h5&gt;
&lt;div class="py-3"&gt;
    &lt;p-button [icon]="activeState[0] ? 'pi pi-minus' : 'pi pi-plus'" (click)="toggle(0)" styleClass="p-button-text" label="Toggle 1st"&gt;&lt;/p-button&gt;
    &lt;p-button [icon]="activeState[1] ? 'pi pi-minus' : 'pi pi-plus'" (click)="toggle(1)" styleClass="p-button-text ml-2" label="Toggle 2st"&gt;&lt;/p-button&gt;
    &lt;p-button [icon]="activeState[2] ? 'pi pi-minus' : 'pi pi-plus'" (click)="toggle(2)" styleClass="p-button-text ml-2" label="Toggle 3st"&gt;&lt;/p-button&gt;
&lt;/div&gt;
    
&lt;p-accordion&gt;
    &lt;p-accordionTab header="Header I" [(selected)]="activeState[0]"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header II" [(selected)]="activeState[1]"&gt;
        &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header III" [(selected)]="activeState[2]"&gt;
        &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
&lt;/p-accordion&gt;

&lt;h5&gt;Tab Change Event&lt;/h5&gt;
&lt;p-accordion (onClose)="onTabClose($event)" (onOpen)="onTabOpen($event)"&gt;
    &lt;p-accordionTab header="Header I"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header II"&gt;
        &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header III"&gt;
        &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
    &lt;p-accordionTab header="Header IV" [disabled]="true"&gt;
        &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
    &lt;/p-accordionTab&gt;
&lt;/p-accordion&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;Component&#125; from '@angular/core';
import &#123;MessageService&#125; from 'primeng/api';

@Component(&#123;
    templateUrl: './accordiondemo.html',
    providers: [MessageService],
    styleUrls: ['./accordiondemo.scss']
&#125;)
export class AccordionDemo &#123;
    
    activeState: boolean[] = [true, false, false];

    constructor(private messageService: MessageService) &#123;&#125;

    onTabClose(event) &#123;
        this.messageService.add(&#123;severity:'info', summary:'Tab Closed', detail: 'Index: ' + event.index&#125;)
    &#125;
    
    onTabOpen(event) &#123;
        this.messageService.add(&#123;severity:'info', summary:'Tab Expanded', detail: 'Index: ' + event.index&#125;);
    &#125;

    toggle(index: number) &#123;
        this.activeState[index] = !this.activeState[index];
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-accordion-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
